<template>
	<scroll-view class="page show">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true" :bgColorStyle="theme">
			<block slot="backText">{{$t("返回")}}</block>
			<block slot="content">{{$t("设置")}}</block>
		</cu-custom>
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title" :style="{color:theme}"></text> {{$t("语言")}}
			</view>
			<view class="action">
				<button class="cu-btn shadow text-white" :style="{backgroundColor:theme}" @tap="languageSetting">{{$t("设置")}}</button>
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title" :style="{color:theme}"></text> {{$t("主题")}}
			</view>
			<view class="action">
				<button class="cu-btn shadow text-white" :style="{backgroundColor:theme}" @tap="themeSetting">{{$t("设置")}}</button>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='language'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="languageChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="val in language">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{val.label}}</view>
								<radio class="round" :class="val.default?'checked':''" :checked="val.default" :value="val.key"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='themeModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="" style="max-height: 40vh;overflow-y: auto;">
				<radio-group class="block" @change="themeChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="val in themeList">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub" :style="{color:val.color}">{{$t(val.title)}}</view>
								<radio class="round" :class="theme == val.color?'checked':''" :checked="theme == val.color" :value="val.color"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				modalName: "",
				language: [{
					"label": "中文",
					"key": "zh",
					"default": false
				}, {
					"label": "English",
					"key": "en",
					default: false
				}],
				themeList: [{
						title: '嫣红',
						name: 'red',
						color: '#e54d42'
					},
					{
						title: '桔橙',
						name: 'orange',
						color: '#f37b1d'
					},
					{
						title: '明黄',
						name: 'yellow',
						color: '#fbbd08'
					},
					{
						title: '橄榄',
						name: 'olive',
						color: '#8dc63f'
					},
					{
						title: '森绿',
						name: 'green',
						color: '#39b54a'
					},
					{
						title: '天青',
						name: 'cyan',
						color: '#1cbbb4'
					},
					{
						title: '海蓝',
						name: 'blue',
						color: '#0081ff'
					},
					{
						title: '姹紫',
						name: 'purple',
						color: '#6739b6'
					},
					{
						title: '木槿',
						name: 'mauve',
						color: '#9c26b0'
					},
					{
						title: '桃粉',
						name: 'pink',
						color: '#e03997'
					},
					{
						title: '棕褐',
						name: 'brown',
						color: '#a5673f'
					}
				]
			}
		},
		computed: {
			...mapState(["theme"])
		},
		mounted() {
			this.language.forEach((v, k) => {
				if (this._i18n.locale == v.key) {
					this.language[k].default = true
				}
			})
			console.log(this._i18n.locale)
		},
		methods: {
			...mapMutations(["setTheme"]),
			hideModal() {
				this.modalName = ""
			},
			languageChange(e) {
				uni.setStorage({
					key: 'js-laguage',
					data: e.detail.value,
					success: () => {
						this._i18n.locale = e.detail.value;
					},
					fail: (res) => {
						uni.showModal({
							title: '错误',
							content: '语言设置失败',
							showCancel: false,
							cancelText: '',
							confirmText: '确定',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				})
			},
			themeChange(e) {
				uni.setStorage({
					key: 'js-theme',
					data: e.detail.value,
					success: () => {
						this.setTheme(e.detail.value);
					},
					fail: (res) => {
						uni.showModal({
							title: '错误',
							content: '主题设置失败',
							showCancel: false,
							cancelText: '',
							confirmText: '确定',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				})
			},
			themeSetting() {
				this.modalName = "themeModal"
			},
			languageSetting() {
				this.modalName = "language"
			},
		}
	}
</script>

<style>
</style>
